<!DOCTYPE HTML>
<html>
<head>
    <title>伪类样式</title>
    <style type="text/css">
        * {
            font-family: 微软雅黑;
            font-size: 14px;
        }
        legend{
            font-size: 15px;
            font-weight:bold;
        }
        a:link{
            color:dodgerblue;
        }
        a:visited{
            color: gray;
        }
        a:hover{
            color: coral;
            font-weight: bold;
        }
        a:active{
            color: blueviolet;
        }
        a{text-decoration: none;}
        span{
            color: red;}
    </style>
</head>
<body>
<br/>
<fieldset><legend>伪类样式 (不知道怎么描述作用)</legend>
    <p>伪类样式用超链接的四种状态来演示</p>
    <p>代码示例
        <pre>
        &lt;style type="text/css"&gt;
        <span>a:link</span>{
        color:dodgerblue;
        }
        <span>a:visited</span>{
        color: gray;
        }
        <span>a:hover</span>{
        color: coral;
        font-weight: bold;
        }
        <span>a:active</span>{
        color: blueviolet;
        }
        a{text-decoration: none;}&lt;/style&gt;</pre></p>
    <p>代码效果：<a href="submit.html">超链接示例</a> (可直接点击达到以下讲述的效果)</p>
    <p>上面代码中:</p>
    <p>　　<span>a:link</span> 指超链接的未访问状态，颜色设置为蓝色，效果为（<em style="color: dodgerblue">超链接颜色示例</em>）</p>
    <p>　　<span>a:visited</span> 指超链接的已访问状态，颜色设置为灰色，效果为（<em style="color:gray">超链接颜色示例</em>）</p>
    <p>　　<span>a:hover</span> 指鼠标悬停在超链接时的状态，颜色设置为橙色，效果为（<em style="color:coral">超链接颜色示例</em>）</p>
    <p>　　<span>a:active</span> 指鼠标点下超链接时的变化，颜色设置为紫色，效果为（<em style="color:blueviolet">超链接颜色示例</em>）</p>
    <p>超链接中<span>去除下划线</span>,用样式：<span>text-decoration: none;</span></p>
    <p>不仅仅可以定义字体颜色的变化，还可以定义字体大小样式等</p>
</fieldset>
</body>
</html>